<template>
  <page-header-wrapper>
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="广告列表">
      <div slot="extra">
        <a-radio-group v-model="status">
          <a-radio-button value="all">全部</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left: 16px; width: 272px;" />
      </div>
    </a-card>
    <div>
      <s-table
        ref="table"
        size="default"
        :localLoading="tableLoading"
        :rowKey="(record) => record.id"
        :showPagination="false"
        :columns="columns"
        :data="loadData"
      >
        <span slot="action" slot-scope="text, record">
          <a
            @click="toDetail(record)"
          >
            编辑
          </a>
        </span>
      </s-table>
    </div>
  </page-header-wrapper>
</template>

<script>
import { getArticlesLists } from '@/api/articles'
import { STable } from '@/components'

export default {
  name: 'ArticlesLists',
  data () {
    return {
      status: 'all',
      tableLoading: false,
      columns: [
        {
          title: '#',
          dataIndex: 'id'
        },
        {
          title: '文章标题',
          dataIndex: 'title'
        },
        {
          title: '封面',
          dataIndex: 'cover'
        }
      ],
      loadData: (paramter) => {
        return getArticlesLists().then(res => {
          return {
            data: res.data
          }
        })
      }
    }
  },
  components: {
    STable
  }
}
</script>

<style lang="scss" scoped>

</style>
